/*
  createVNode   创建虚拟DOM，h 函数
  render        渲染到页面的

  预期结果：
  Confirm({ text: '您确定从购物车删除选中的商品吗？' })
    .then(() => {
      store.dispatch('cart/batchDeleteCart')
    })
    .catch(e => {})
*/
import { createVNode, render } from 'vue'
import XtxConfirm from './XtxConfirm.vue'

// 准备一个容器，用于移除组件
// 🔔 用 JSX 语法创建虚拟 DOM
const divVNode = createVNode('div', { class: 'xtx-confirm-container' })
render(divVNode, document.body)
const container = divVNode.el

export const Confirm = ({ title, text }) => {
  return new Promise((resolve, reject) => {
    // 2. 点击确认按钮，触发resolve同时销毁组件
    const confirmCallback = () => {
      resolve('确认')
      render(null, container)
    }

    // 3. 点击取消按钮，触发reject同时销毁组件
    const cancelCallback = () => {
      reject(new Error('取消'))
      render(null, container)
    }

    // 1. 动态创建组件
    // 1️⃣ 普通写法：创建虚拟DOM
    // const vNode = createVNode(XtxConfirm, { title, text, cancelCallback, confirmCallback })
    // 2️⃣ 高级写法：JSX 多属性绑定
    const vNode = createVNode(XtxConfirm, { title, text, cancelCallback, confirmCallback })
    // 把虚拟DOM写入到容器中
    render(vNode, container)
  })
}
